<template>
	<view>
		<hx-navbar ref="hxnb" :config="config">
			<block slot="max">
				<view class="nav_wrap flex">
					<view class="back_wrap flex" @click="back">
						<u-icon name="arrow-left" color="#333" size="36"></u-icon>
					</view>
				</view>
			</block>
		</hx-navbar>
		<view class="main-div">
			<image class="main-bg" :src="lsdetail.avatar" mode="aspectFill"></image>
		</view>
		<view class="m-div u-p-b-40">
			<view class="pro-jj flex flex_sb"  v-if="priceList">
				<view class="">
					<view class="font_weight font_16_333">
						{{priceList.name}}
					</view>
					<view class="u-m-t-12">
						<span class="m-fh">￥</span>
						<span class="m-m">{{priceList.price}}</span>
						<span class="m-sj">/{{priceList.time_sku}}{{priceList.unit}}</span>
					</view>
				</view>

				<view class=" m-btn"  @click="suborder">
					预约咨询
				</view>
			</view>
			<view class="pro-jj u-m-t-20"  v-if="priceList">
				<view class="">
					<view class="flex">
						<image class="fw-icon" :src="priceList.icon" mode=""></image>
						<view class="font_weight font_16_333 u-m-l-20">
							{{priceList.name}}服务介绍
						</view>
					</view>
					<view class="u-m-t-20 fwjj">
						{{priceList.desc}}
					</view>
				</view>
			</view>

			<view class="ls-div u-m-t-26">
				<image class="tw-lsbg" src="../../static/img/home/ls-i-i.png" mode=""></image>
				<view class="flex_only u-p-b-20 flex_sb ls-d-t">
					<view class="flex">
						<image class="headimg" :src="lsdetail.avatar" mode="aspectFill"></image>
						<view class="u-m-l-20  ">

							<view class="flex">
								<view class="font_14_333 font_weight">
									{{lsdetail.name}}
								</view>
								<view class="flex">
									<image class="u-m-l-8 h23" src="../../static/img/home/h23.png" mode=""></image>
									<view class="font_10_333 u-m-l-8">
										{{lsdetail.province}}
									</view>
								</view>
								<view class="flex u-m-l-16 ">
									<image class="h24" src="../../static/img/home/h24.png" mode=""></image>
									<view class="pf-t">{{lsdetail.mark}}</view>
								</view>
							</view>

							<view class="u-m-t-14 font_10_666">
								执业证号：{{lsdetail.license_num}}
							</view>
						</view>

					</view>
					<view class="lszy" @click="todetail">
						律师主页 >
					</view>
				</view>
				<view class="u-m-t-12">
					<view class="ls-sss-item flex">
						<image class="ls-sss" src="../../static/img/home/ls-sss.png" mode=""></image>
						<view class="ls-te u-m-l-8">
							1v1深度沟通，剖析案情，提供专业解答
						</view>
					</view>
					<view class="ls-sss-item flex">
						<image class="ls-sss" src="../../static/img/home/ls-sss.png" mode=""></image>
						<view class="ls-te u-m-l-8">
							服务有保障，服务不满意可更换律师
						</view>
					</view>
					<view class="ls-sss-item flex">
						<image class="ls-sss" src="../../static/img/home/ls-sss.png" mode=""></image>
						<view class="ls-te u-m-l-8">
							平均3分钟内回复，问题解决率99%
						</view>
					</view>
				</view>
			</view>
			<view class="u-m-t-20" style="margin-right: -32rpx;">
				<view class="font_weight font_16_333 u-m-b-20">
					其它服务
				</view>
				<scroll-view scroll-x="true"  v-if="lawyer_id">
					<fuwuList type2="2" type="2" :sid="lawyer_id" @suborder="suborder2"></fuwuList>
				</scroll-view>
			</view>

			<view class="pro-jj">
				<view class="pingjia">
					<view class="pingjia-top flex flex_cen">
						<view class="flex">
							<view class="pj-num">
								{{lsdetail.mark}}
							</view>
							<view class="pj-xing flex u-m-l-40">
								<image src="../../static/img/home/h24.png" mode="" v-for="i in lsdetail.mark" :key="i"></image>
							</view>
						</view>
					</view>
					<view class="flex flex_sb u-m-t-26">
						<view class="font_16_333">
							用户评论（{{pinglunList.length}}）
						</view>
						<!-- <view class="font_12_666">
							更多
							<u-icon name="arrow-right" color="#666" size="20"></u-icon>
						</view> -->
					</view>
					<view class="pj-main ">
						<view class="pj-item flex_only" v-for="(item,index) in pinglunList" :key="index">
							<image class="headimg" :src="item.user.image" mode=""></image>
							<view class="u-m-l-16" style="width: 540rpx;">
								<view class="flex flex_sb font_14_666">
									<view class="">
										{{item.is_show==1?'匿名用户':item.user.name}}
									</view>
									<view class="">
										{{item.created_at}}
									</view>
								</view>
								<view class="u-m-t-16">
									{{item.content}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="" style="width: 100%;height: 140rpx;"></view>
		<view class="bottom-btn flex flex_cen" v-if="priceList">
			<view class="flex x-btn flex_cen" @click="suborder">
				<image class="szt-img" src="../../static/img/home/c4.png" mode=""></image>
				<view class="xiadan">
					预约咨询
				</view>
				<!-- <view class="u-m-t-8">
					<span class="m-m">(</span>
					<span class="m-fh">￥</span>
					<span class="m-m">{{priceList.price}}</span>
					<span class="m-sj">/{{priceList.time_sku}}{{priceList.unit}}</span>
					<span class="m-m">)</span>
				</view> -->
			</view>
		</view>


		<!-- <u-popup v-model="soShow" mode="bottom" closeable border-radius="32">
			<view class="po-bikan">
				<view class="bk-title u-m-b-32">
					服务项目名称
				</view>
				<view class="">
					<subOrder @nexttick="nexttick"></subOrder>
				</view>
			</view>
		</u-popup> -->

		<mypicker mode="selector" v-model="showsr2" :range="selector1" @confirm="typeconfirm" range-key="name">
		</mypicker>
		<mypickertime v-if="priceList" mode="multiSelector" :priceList="priceList" v-model="showsr3" :range="multiSelector" @confirm="typeconfirm2">
		</mypickertime>
		<youhui v-if="yhshow" @close="youhuiclose"></youhui>
		
		
		
		<u-popup v-model="sofuwuShow" mode="bottom" closeable border-radius="32">
			<view class="po-bikan">
				<view class="bk-title u-m-b-32">
					服务项目名称
				</view>
				<view class="" v-if="lawyer_id">
					<subOrder @nexttick="nexttick" :priceList="priceList" :lid="lawyer_id"></subOrder>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="wcshow" mode="center" border-radius="32">
			<view class="popupmd text_center">
				<view class="font_16_333 font_weight">
					预约成功
				</view>
				<view class="font_12_666 u-m-t-20 lin40">
					您已支付成功，可以在{{day}} {{start}}-{{end}}时段联系律师为您服务
				</view>
				<view class="p-bd u-m-t-40 flex flex_sa">
					<view class="p-btn2" @click="wcshow=false">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		
		
		<couponList :couponShow="couponShow" @shiyong="shiyong" type="1"></couponList>
	</view>

</template>

<script>
	import couponList from '../../components/couponList/couponList.vue';
	import youhui from '../../components/youhui/youhui.vue';
	import fuwuList from '../../components/fuwuList/fuwuList.vue';
	import subOrder from '../../components/subOrder/subOrder.vue';
	import mypicker from '../../components/my-picker/my-picker.vue';
	import mypickertime from '../../components/my-picker-time/my-picker-time.vue';
	export default {
		components: {
			fuwuList,
			subOrder,
			youhui,
			mypicker,
			mypickertime,
			couponList
		},
		data() {
			return {
				couponShow:false,
				yhq_id:'',
				config: {
					maxSlot: true,
					back: false,
					barPlaceholder: false,
					backgroundColor: [0, '#FFFFFF'],
					slideBackgroundColor: [1, '#FFFFFF'],
				},
				soShow: false,
				wcshow:false,
				yhshow: false,

				showsr2: false,
				showsr3: false,
				zixunShow: false,
				selector1: [],
				multiSelector: [
					[],
					['8:00-10:00','10:00-12:00', '12:00-14:00', '14:00-16:00', '16:00-18:00','18:00-20:00']
				],
				pinglunList:[],
				priceList:null,
				lsdetail: [],

				lawyer_id: '',
				serve_id: '',
				day: '',
				start: '',
				end: '',
				price: '',
				
				
				sofuwuShow:false
			}
		},
		onPageScroll(e) {
			// 重点，用到滑动切换必须加上
			this.$refs.hxnb.pageScroll(e);
		},
		onLoad(e) {
			this.lawyer_id = e.id
			this.fuwuList()
			this.getInfo()
			this.get_date()
			this.pinglun()
		},
		methods: {
			shiyong(e){
				if(e){
					
					if(this.price*1 < e.man_price*1){
						uni.showToast({
							title: "优惠券无效，不足满减金额",
							icon: "none"
						});
						this.yhq_id = ''
						// this.price = ((this.price*1) - (e.jian_price*1)).toFixed(2)
						// this.priceList.price = this.price
					}else{
						this.yhq_id = e.id
						this.price = ((this.price*1) - (e.jian_price*1)).toFixed(2)
						this.priceList.price = this.price
					}
				}else{
					this.yhq_id = ''
				}
				this.couponShow = false
				console.log(e)
			},
			suborder2(e){
				
				this.sofuwuShow = true
				this.priceList = e
			},
			get_date() {
				let dateArray = []
				//获取今天日期
				let myDate = new Date()
				let today = myDate.getFullYear() + '-' + (myDate.getMonth() + 1) + "-" + myDate.getDate();
				myDate.setDate(myDate.getDate())
				let dateTemp; // 临时日期数据
				let flag = 1;
				for (let i = 0; i < 30; i++) {
					dateTemp = myDate.getFullYear() + '-' + (myDate.getMonth() + 1) + "-" + myDate.getDate()
					dateArray.push(dateTemp)
					myDate.setDate(myDate.getDate() + flag);
				}

				this.multiSelector[0] = dateArray
			},
			pinglun(){
				this.$api({
					url: '/lawyer/detail_comment',
					method: 'get',
					data: {
						limit:1000,
						lawyer_id:this.lawyer_id
					},
				}).then(res => {
					if (res.code == 1) {
						this.pinglunList = res.data.data
					} 
				})
			},
			fuwuList() {
				this.$api({
					url: '/lawyer/serve_config',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						lawyer_id: this.lawyer_id,
					},
				}).then(res => {
					if (res.code == 1) {
						this.selector1 = []
						
						for(let i =0;i<res.data.length;i++){
							if(res.data[i].price && res.data[i].status==1){
								this.selector1.push(res.data[i])
							}
						}
						if(this.selector1.length>0){
							this.priceList = this.selector1[0]
						}
					}
				})
			},
			//个人信息
			getInfo() {
				this.$api({
					url: '/lawyer/detail',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						lawyer_id: this.lawyer_id
					},
				}).then(res => {
					if (res.code == 1) {
						this.lsdetail = res.data
					}
				})

			},
			youhuiclose() {
				this.yhshow = false
			},
			suborder() {
				
				this.showsr2 = true
				// this.soShow = true
			},
			back() {
				uni.navigateBack()
			},
			todetail() {
				uni.navigateTo({
					url: "/pages/lawyer/lawyerDetail?id="+this.lawyer_id
				})
			},
			typeconfirm(e) {
				this.priceList = this.selector1[e]
				this.serve_id = this.selector1[e].id
				this.price = this.selector1[e].price
				this.couponShow = true
				this.showsr2 = false
				this.showsr3 = true
				console.log(this.selector1[e])
			},
			typeconfirm2(e) {
				console.log(e)
				// this.showsr3 = true
				// console.log(this.multiSelector[0][e[0]])
				// console.log(this.multiSelector[1][e[0]])
				this.day = this.multiSelector[0][e[0]]
				let time = this.multiSelector[1][e[1]]?this.multiSelector[1][e[1]].split('-'):this.multiSelector[1][0].split('-')
				this.start = time[0]
				this.end = time[1]
				// console.log(time)
				// return
				this.$api({
					url: '/user/apply',
					method: 'post',
					data: {
						token: uni.getStorageSync("token"),
						lawyer_id: this.lawyer_id,
						serve_id: this.serve_id,
						day: this.day,
						start: this.start,
						end: this.end,
						price: this.price,
						yhq_id:this.yhq_id
						// task_id:0
					},
				}).then(res => {
					if (res.code == 1) {
						// uni.showToast({
						// 	title: "预约成功",
						// 	icon: "none"
						// });
						// uni.navigateTo({
						// 	url: "/pages/index/paySuccess?list="+JSON.stringify(res.data)
						// })
						if(res.data.if_free==1){
							this.wcshow = true
							return
						}
						
						let that = this
						uni.requestPayment({
							provider: "wxpay",
							appid: res.data.pay_info.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
							timeStamp: res.data.pay_info.timeStamp, // 时间戳（单位：秒）
							paySign: res.data.pay_info.paySign, //签名
							nonceStr: res.data.pay_info.nonceStr, // 随机字符串
							package: res.data.pay_info.prepay_id, // 固定值
							signType: res.data.pay_info.signType, // 签名算法，这里用的 MD5/RSA 签名
							success(res2) {
								if (res2.errMsg == "requestPayment:ok") {
									// uni.showToast({
									// 	title: "购买成功",
									// 	icon: "none"
									// });
									that.wcshow = true
								}
							},
							fail(e) {
								console.log('支付失败支付失败支付失败', e)
								uni.showToast({
									title: "支付失败",
									icon: "none"
								});
							}
						})
					}
				})
				

			},
			nexttick() {
				console.log("lllllllll")
				// this.yhshow = true
				this.soShow = false
				this.showsr2 = true
			}
		}
	}
</script>

<style scoped lang="scss">
	.lin40{
		line-height: 40rpx;
	}
	.po-bikan {
		padding: 40rpx 32rpx;
		background: #F6F6F6;
		width: 100%;
		padding-bottom: 0;

		.bk-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
		}
	}

	.bottom-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 8rpx 2rpx rgba(0, 0, 0, 0.14);
		color: #ffffff;

		.x-btn {
			width: 686rpx;
			height: 92rpx;
			background: linear-gradient(180deg, #FA2D2D 0%, #F40000 100%);
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			position: relative;

			.szt-img {
				position: absolute;
				right: 66rpx;
				top: 14rpx;
				width: 72rpx;
				height: 64rpx;
			}
		}

		.xiadan {
			font-size: 36rpx;
		}

		.m-fh {
			font-weight: bold;
			font-size: 28rpx;

		}

		.m-m {
			font-weight: bold;
			font-size: 36rpx;

		}

		.m-sj {
			font-size: 28rpx;

		}
	}

	.nav_wrap {
		width: 100vw;
		position: relative;
		height: 88rpx;

		.back_wrap {
			position: absolute;
			left: 24rpx;
		}
	}

	.main-div {
		position: relative;
		width: 100%;

		.main-bg {
			width: 100%;
			height: 924rpx;
			position: absolute;
			top: 0;
			z-index: 0;
		}

	}

	.m-div {
		margin: 0 32rpx;
		margin-top: 950rpx;

		.pro-jj {
			width: 686rpx;
			// height: 140rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 24rpx 24rpx;

			.m-fh {
				font-weight: bold;
				font-size: 32rpx;
				color: #FC3A30;
			}

			.m-m {
				font-weight: bold;
				font-size: 44rpx;
				color: #FC3A30;
			}

			.m-sj {
				font-size: 20rpx;
				color: #666666;
			}

			.m-btn {
				width: 200rpx;
				height: 56rpx;
				background: linear-gradient(180deg, #FA2D2D 0%, #F40000 100%);
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				font-weight: bold;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 56rpx;

			}
		}

		.fw-icon {
			width: 52rpx;
			height: 52rpx;
		}

		.fwjj {
			font-size: 24rpx;
			color: #666666;
			line-height: 40rpx;
		}

		.ls-div {
			position: relative;
			width: 686rpx;
			// height: 120rpx;
			background: linear-gradient(90deg, #FFF8EF 0%, #FFFBF5 55%, #FFF8EF 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #F4CF9C;
			padding: 18rpx 24rpx;

			.lszy {
				font-size: 24rpx;
				color: #FF640D;
			}

			.ls-d-t {
				border-bottom: 1px #ECE4D9 dashed;
			}

			.ls-sss-item {
				margin-top: 10rpx;

				.ls-sss {
					width: 24rpx;
					height: 24rpx;
				}

				.ls-te {
					font-weight: bold;
					font-size: 20rpx;
					color: #B89D7B;
				}
			}

			.tw-lsbg {
				width: 134rpx;
				height: 136rpx;
				position: absolute;
				right: 0;
				bottom: 0;
			}

			.headimg {
				height: 84rpx;
				width: 68rpx;
				border-radius: 8rpx;
			}

			.h23 {
				width: 24rpx;
				height: 20rpx;
			}

			.h24 {
				width: 24rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}

			.pf-t {
				font-size: 20rpx;
				color: #FD8643;
			}
		}
	}

	.pingjia {

		.pingjia-top {
			width: 624rpx;
			height: 94rpx;
			background: linear-gradient(180deg, #FCF6F3 0%, #FFFFFF 100%);
			border-radius: 12rpx 12rpx 12rpx 12rpx;

			.pj-num {
				font-weight: bold;
				font-size: 44rpx;
				color: #FD8643;
			}

			.pj-xing {


				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}
			}
		}

		.pj-main {
			margin-top: 20rpx;

			.pj-item {
				padding: 32rpx 0;
				border-bottom: 2rpx solid #F7F7F7;


				.headimg {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
			}
		}
	}
	.popupmd{
		width: 554rpx;
		// height: 344rpx;
		background: linear-gradient( 180deg, #FFECEA 0%, #FFFFFF 100%);
		padding: 68rpx 24rpx;
		
		.fz-icon{
			width: 24rpx;
			height: 24rpx;
			margin-left: 20rpx;
		}
		
		&2{
			padding: 48rpx;
		}
		.p-bd{
			font-size: 28rpx;
			line-height: 64rpx;
			text-align: center;
			.p-btn1{
				width: 248rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				border: 2rpx solid #D6D6D6;
				
				color: #9695A3;
			}
			.p-btn2{
				width: 248rpx;
				height: 64rpx;
				background: linear-gradient( 180deg, #FA2D2D 0%, #F40000 100%);
				border-radius: 46rpx 46rpx 46rpx 46rpx;
				color: #FFFFFF;
			}
		}
		
		
	}
</style>